<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例">
    </meta>
    <title>水面-编辑</title>
    <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        /* .box span{
            display: inline-block;
            margin-top: 10px;
        } */

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 100px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }

        input {
            width: 222px;
        }

        .colorbox {
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
        <earth-comp></earth-comp>
    </div>

    <script>
        // 1 创建Earth的vue组件
        var EarthComp = {
            template: `
                <div style="width: 100%; height: 100%"  @click="raise = false,reduce = false">
                    <div ref="earthContainer" style="width: 100%; height: 100%">
                    </div>
                    <div class="box" style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 25px;min-width:200px; font-size:24px; font-family: 宋体;">
                            <div class="defultbtn" :class="{'btnon':creating}" @click="creating = !creating">创建</div>
                            <div class="defultbtn" style="margin-left:20px;" :class="{'btnon':editing}"  @click="editing = !editing">编辑</div><br/>
                            <span @click="show = !show" style="cursor: pointer;"><input type="checkbox" style="width: 14px; cursor: pointer;" v-model="show">水面显隐</span><br/>
                            <span @click="outlineshow = !outlineshow" style="cursor: pointer;"><input type="checkbox" style="width: 14px; cursor: pointer;" v-model="outlineshow">水面边框显隐</span><br/>
                            <span @click="ground = !ground" style="cursor: pointer;"><input type="checkbox" style="width: 14px; cursor: pointer;" v-model="ground">是否贴地</span><br/>
                            <span>水面高度：{{height | numFilter}}米</span><br/>
                            <span>边框宽度: {{ outlineWidth }}像素</span><br/>
                            <span><input type="range" min="0" max="100" step="1" v-model.number="outlineWidth"></span><br/>
                            <span>边框颜色：</span><input class="colorbox" type="color" value="#00ff40" @input=outlineColorchange(event)><br/>
                        </div>
                </div>
            `,
            data() {
                return {
                    _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
                    creating: false,
                    editing: false,
                    show: true,
                    outlineshow: true,
                    height: 0,
                    outlineWidth: 0,
                    ground: false
                };
            },
            // 1.1 资源创建
            mounted() {
                // 1.1.1 创建地球
                var earth = new XE.Earth(this.$refs.earthContainer);

                // 1.1.2 场景配置
                earth.sceneTree.root = {
                    "title": "当前场景",
                    "isSelected": true,
                    "children": [{
                        "czmObject": {
                            "xbsjType": "Imagery",
                            "enabled": true,
                            "name": "谷歌影像",
                            "show": true,
                            "xbsjImageryProvider": {
                                "XbsjImageryProvider": {
                                    "url": "//www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
                                }
                            }
                        }
                    },
                    {
                        "czmObject": {
                            "name": '大雁塔',
                            "xbsjType": "Tileset",
                            "url": '../assets/dayanta/tileset.json',
                            "xbsjPosition": [
                                1.9016974701882112,
                                0.5972325152147303,
                                0
                            ],
                            "xbsjUseOriginTransform": false,
                            "skipLevelOfDetail": false
                        },
                        "ref": 'tileset'
                    },
                    {
                        "ref": 'water1',
                        "czmObject": {
                            "xbsjType": "Water",
                            "positions": [
                                1.90168174313679,
                                0.5972732924673276,
                                1.9017230593134629,
                                0.5972734968580539,
                                1.9017177812531605,
                                0.5972242141220793,
                                1.90168212565758,
                                0.5972259534519064
                            ],
                            height: 0.24
                        }
                    }
                    ]
                };

                var water1 = earth.sceneTree.$refs.water1.czmObject;

                // 设置相机位置
                // earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
                earth.camera.position = [1.901699638033817, 0.5972090528439601, 268.1942851441749];
                earth.camera.rotation = [0.035912984572358475, -0.8495548404958315, 0.00017022824617729526];

                // 1.1.5 数据绑定
                this._creatingUnbind = XE.MVVM.bind(this, 'creating', water1, 'creating');
                this._editingUnbind = XE.MVVM.bind(this, 'editing', water1, 'editing');
                this._showUnbind = XE.MVVM.bind(this, 'show', water1, 'show');
                this._outlineshowUnbind = XE.MVVM.bind(this, 'outlineshow', water1.outline, 'show');
                this._heightUnbind = XE.MVVM.bind(this, 'height', water1, 'height');
                this._outlineWidthUnbind = XE.MVVM.bind(this, 'outlineWidth', water1.outline, 'width');
                this._groundhUnbind = XE.MVVM.bind(this, 'ground', water1, 'ground');

                this._earth = earth;

                // only for Debug
                window.water1 = water1;
                window.earth = earth;
            },
            methods: {
                outlineColorchange(event) {
                    var outlineColor = event.target.value;
                    water1.outline.color = outlineColor.xeColor;
                }
            },
            filters: {
                numFilter(value) {
                    // 截取当前数据到小数点后两位
                    let realVal = parseFloat(value).toFixed(2)
                    return realVal
                }
            },
            // 1.2 资源销毁
            beforeDestroy() {
                // vue程序销毁时，需要清理相关资源
                this._creatingUnbind = this._creatingUnbind && this._creatingUnbind();
                this._editingUnbind = this._editingUnbind && this._editingUnbind();
                this._showUnbind = this._showUnbind && this._showUnbind();
                this._outlineshowUnbind = this._outlineshowUnbind && this._outlineshowUnbind();
                this._heightUnbind = this._heightUnbind && this._heightUnbind();
                this._outlineWidthUnbind = this._outlineWidthUnbind && this._outlineWidthUnbind();
                this._groundhUnbind = this._groundhUnbind && this._groundhUnbind();
                this._earth = this._earth && this._earth.destroy();
            },
        }

        // 2 创建vue程序
        // XE.ready()用来加载Cesium.js等相关资源
        XE.ready().then(() => {
            var app = new Vue({
                el: '#vueApp',
                components: {
                    EarthComp,
                },
            });
        });
    </script>
</body>

</html>